import { App, ColorPicker, Space } from 'antd';
import React, { useRef, useState } from 'react'
import type { ColorPickerProps } from 'antd';
import '../../assets/sass/home_page/Tuo/tuo2.scss'
import {addlists,addlistes,addlisteos} from "../../store/store_ff/count_img"
import { useSelector,useDispatch } from 'react-redux';
import html2canvas from 'html2canvas';
type Color = GetProp<ColorPickerProps, 'value'>;
function Tuo2() {
  const [colorHex, setColorHex] = useState<Color>('#1677ff');
  const [formatHex, setFormatHex] = useState<Format | undefined>('hex');
  const [formatHexs, setFormatHexs] = useState<Format | undefined>('hex');
  const [colorH,setcolorH]=useState<Color>('#1677ff');
  const hexString = React.useMemo<string>(
    () => (typeof colorHex === 'string' ? colorHex : colorHex?.toHexString()),
    [colorHex],
  );
  const hexStrings = React.useMemo<string>(
    () => (typeof colorH === 'string' ? colorH : colorH?.toHexString()),
    [colorH],
  );
    const dispatch=useDispatch()
  const lists=[
    {
      id:1,
      color:'#000000',
    },
    {
      id:2,
      color:'#637287',
    },
    {
      id:3,
      color:'#B93252',
    },
    {
      id:4,
      color:'#61CC3D',
    },
    {
      id:5,
      color:'#FF6116',
    },
    {
      id:6,
      color:'#16FFD7',
    },
    {
      id:7,
      color:'#6C635B',
    },
    {
      id:8,
      color:'#2613DD',
    },
    {
      id:9,
      color:'#DCDD13',
    },
    {
      id:10,
      color:'#13DD2B',
    }
  ]
  const images=[
    {
      id:1,
      img:'/src/assets/image/home_page/side_menu/3.png'
    },
    {
      id:2,
      img:'/src/assets/image/home_page/side_menu/4.png'
    },
    {
      id:3,
      img:'/src/assets/image/home_page/side_menu/5.png'
    },
  ]
  const onclickes=(color:any)=>{
      console.log(color)
      dispatch(addlists(color))
  }
    dispatch(addlists(hexString))
    dispatch(addlisteos(hexStrings))
    const onclicks=(imgs:any)=>{
      dispatch(addlistes(imgs))
    }
    const fontsize=(colors:any)=>{
      dispatch(addlisteos(colors))
    }
    const generateImages=()=>{
  
    }
  return (
    <div className='consoles'>
      <h3 className='h3s'>
        页面设置
      </h3>
      <Space direction="vertical" style={{marginTop:'5px',marginLeft:'5px'}}>
        <ColorPicker
          format={formatHex}
          value={colorHex}
          onChange={setColorHex}
          onFormatChange={setFormatHex}
        />

      </Space>
      <div className="dives">
{
        lists.map((item:any,index:any)=>(
          <div className="divs" key={index} style={{background:item.color}} onClick={()=>{onclickes(item.color)}}>
              </div>
        ))
      }
      </div>
      <h3 className='h3s'>
        背景设置
      </h3>
      <div className="diveos">
        {
          images.map((item:any,index:any)=>(
          <div className="divoes" key={index} onClick={()=>{onclicks(item.img)}}>
             <img src={item.img} alt="" />
              </div>
        ))
        }
      </div>
      <h3 className='h3s'>
        字体颜色设置
      </h3>
      <Space direction="vertical" style={{marginTop:'5px',marginLeft:'5px'}}>
        <ColorPicker
          format={formatHexs}
          value={colorH}
          onChange={setcolorH}
          onFormatChange={setFormatHexs}
        />

      </Space>
      <div className="dives">
{
        lists.map((item:any,index:any)=>(
          <div className="divs" key={index} style={{background:item.color}} onClick={()=>{fontsize(item.color)}}>
              </div>
        ))
      }
      </div>
      <button onClick={generateImages}>另存为图片</button>
    </div>
  )
}

export default Tuo2
